<template>
  <el-card shadow="always"
           style="margin-top: 10px;margin-left: 10px;margin-right: 10px;height: 98vh;">
    <el-row justify="center">
      <el-button link @click="ChangeArrow()">
        <el-icon v-if="isCollapse">
          <ArrowRight/>
        </el-icon>
        <el-icon v-if="!isCollapse">
          <ArrowLeft/>
        </el-icon>
      </el-button>
    </el-row>
    <el-menu :collapse="isCollapse" class="el-menu-vertical-demo">
      <el-menu-item index="1" @click="router.push('/cat/cat')">
        <el-icon>
            <svg class="icon" height="200" p-id="5323" t="1695739108568" version="1.1"
                 viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                <path d="M760.533 183.893s-56.107 74.24-68.16 117.333c-12.053 43.093-57.173 53.12-80.213 76.16-23.04 23.04-241.707 50.133-305.813 402.133 0 0 0 49.173-60.16 63.147-60.16 14.08-128.427 30.507-140.373 15.04-11.093-14.293 76.16-47.147 76.16-47.147s43.093-28.053 43.093-39.147c0-10.987-79.253 20.053-79.253 20.053S-8.639 843.625 44.587 899.838c53.12 56.107 249.707 0 286.827-16 37.12-16 91.2-24.107 116.373-2.027 25.067 22.08 42.133 32.107 128.32 27.093 86.187-5.013 158.4-5.013 158.4-5.013s33.067-32.107-28.053-47.147l-56.107-4.053s-46.08 0.96-9.067-48.107c37.12-49.173 35.093-81.173 35.093-81.173s23.04-0.96 31.04 37.12 20.053 114.347 85.227 120.32c0 0 14.08 46.08 86.187 21.013 0 0 37.12-20.053-9.067-42.133l-17.067-2.987s-72.213-135.36-69.227-175.467c0 0-8-32.107 19.093-55.147s99.307-113.28 57.173-275.733c0 0-9.067-20.053 52.16-27.093 61.12-7.04 69.227-39.147 77.227-78.187 0 0-2.987-13.013-17.067-24.107l-13.013-15.147s-18.027-61.12-101.227-55.147l-7.04-9.067-10.027-43.093s-23.04 5.973-24.107 31.04l-16-20.053c0 0.107-37.12 18.133-40.107 74.347z"
                      p-id="5324"></path>
            </svg>
        </el-icon>
        <span>猫档案</span>
      </el-menu-item>
      <el-menu-item index="6">
        <el-icon>
          <document/>
        </el-icon>
        <span>猫咪小报</span>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon>
          <svg t="1699344735917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6036" width="200" height="200"><path d="M810.666667 256h42.666666a128 128 0 0 1 128 128v363.221333A106.112 106.112 0 0 1 875.221333 853.333333h-53.76a42.666667 42.666667 0 0 0-38.442666 24.277334l-26.026667 54.442666a85.333333 85.333333 0 0 1-155.648-3.584l-20.693333-49.066666a42.666667 42.666667 0 0 0-39.296-26.069334h-113.92a42.666667 42.666667 0 0 1 0-85.333333h113.92a128 128 0 0 1 117.930666 78.250667l20.693334 49.066666 26.026666-54.485333A128 128 0 0 1 821.504 768h53.717333c11.477333 0 20.778667-9.301333 20.778667-20.778667V384a42.666667 42.666667 0 0 0-42.666667-42.666667h-42.666666v255.317334a128.128 128.128 0 0 1-127.872 128.298666h-213.589334c-35.712 0-90.197333 22.485333-115.370666 47.530667l-37.418667 37.205333C272.981333 852.906667 213.333333 829.098667 213.333333 767.232h85.333334v0.682667H213.333333c0-24.277333-19.541333-44.373333-43.605333-44.885334A130.261333 130.261333 0 0 1 42.666667 593.450667V255.658667A127.744 127.744 0 0 1 170.410667 128h512.512A128.085333 128.085333 0 0 1 810.666667 256zM298.666667 767.914667H213.333333v-0.682667h85.333334v0.682667z m-10.24-50.688l5.248-5.248c41.130667-40.96 117.290667-72.362667 175.530666-72.362667h213.589334c23.381333 0 42.538667-19.2 42.538666-42.965333V256.298667C725.333333 232.576 706.218667 213.333333 682.922667 213.333333H170.410667A42.410667 42.410667 0 0 0 128 255.658667v337.792c0 23.68 19.669333 43.733333 43.605333 44.288A130.133333 130.133333 0 0 1 288.426667 717.226667z" p-id="6037"></path><path d="M256 384h341.333333a42.666667 42.666667 0 0 0 0-85.333333H256a42.666667 42.666667 0 1 0 0 85.333333zM256 554.666667h256a42.666667 42.666667 0 0 0 0-85.333334H256a42.666667 42.666667 0 1 0 0 85.333334z" p-id="6038"></path></svg>
        </el-icon>
        <span>猫友论坛</span>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon>
          <svg t="1699344864481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7164" width="200" height="200"><path d="M512 814.459259c-13.274074 0-26.548148-4.740741-37.925926-14.222222-91.022222-84.385185-187.733333-181.096296-189.62963-254.103704-0.948148-34.133333 11.377778-66.37037 34.133334-91.022222 25.6-26.548148 61.62963-41.718519 97.659259-41.718518 36.02963 0 71.111111 15.17037 94.814815 40.77037 24.651852-25.6 58.785185-40.77037 95.762963-40.77037 73.007407 0 131.792593 59.733333 131.792592 131.792592 0 67.318519-91.022222 162.133333-189.629629 254.103704-9.481481 10.42963-23.703704 15.17037-36.977778 15.17037zM416.237037 470.281481c-20.859259 0-41.718519 8.533333-56.888889 23.703704-12.325926 13.274074-18.962963 31.288889-18.962963 49.303704 1.896296 54.992593 125.155556 170.666667 171.614815 214.281481 112.82963-106.192593 170.666667-177.303704 170.666667-212.385185 0-41.718519-34.133333-74.903704-74.903704-74.903704-26.548148 0-51.2 14.222222-65.422222 37.925926-17.066667 29.392593-47.407407 27.496296-61.62963-1.896296-12.325926-21.807407-36.977778-36.02963-64.474074-36.02963z" fill="#2c2c2c" p-id="7165"></path><path d="M864.711111 931.081481c0 16.118519-13.274074 29.392593-29.392592 29.392593H188.681481c-16.118519 0-29.392593-13.274074-29.392592-29.392593V536.651852c0-16.118519 13.274074-29.392593 29.392592-29.392593 16.118519 0 29.392593 13.274074 29.392593 29.392593V872.296296c0 16.118519 13.274074 29.392593 29.392593 29.392593H777.481481c16.118519 0 29.392593-13.274074 29.392593-29.392593V536.651852c0-16.118519 13.274074-29.392593 29.392593-29.392593 16.118519 0 29.392593 13.274074 29.392592 29.392593v394.429629z m0 29.392593M958.577778 447.525926l-94.814815-91.97037V167.822222c0-16.118519-13.274074-28.444444-28.444444-28.444444H734.814815c-16.118519 0-28.444444 13.274074-28.444445 28.444444v53.096297L531.911111 71.111111c-11.377778-9.481481-27.496296-9.481481-37.925926 0L66.37037 447.525926c-12.325926 10.42963-13.274074 29.392593-2.844444 40.77037 10.42963 12.325926 29.392593 13.274074 41.718518 2.844445l388.740741-343.22963c11.377778-9.481481 27.496296-9.481481 37.925926 0l231.348148 197.214815 40.770371 36.02963 112.829629 108.088888c11.377778 11.377778 30.340741 11.377778 41.718519-0.948148 11.377778-10.42963 11.377778-29.392593 0-40.77037z m-194.370371-180.148148v-48.355556c0-11.377778 9.481481-20.859259 20.85926-20.859259 11.377778 0 20.859259 9.481481 20.859259 20.859259v85.333334l-41.718519-36.977778z" fill="#2c2c2c" p-id="7166"></path></svg>
        </el-icon>
        <span>猫友家庭</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon>
          <svg t="1699344961690" class="icon" viewBox="0 0 1187 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9043" width="200" height="200"><path d="M1048.627816 54.383463c-200.73803-139.010469-390.85892 32.345242-390.85892 32.345242l-6.419667 6.913487 228.145068 246.910247a127.158777 127.158777 0 0 1 14.567704 152.590532l135.306815 144.195583c21.975012-24.691025 39.99946-46.912947 53.332614-64.690484 9.87641-13.086243 19.505909-26.172486 29.135409-39.505639 77.776728-107.159047 137.529007-339.254678-63.209023-478.265147zM771.84143 562.52475h-4.197475a140.49193 140.49193 0 0 1-101.233201-46.912947l-154.812724-172.837172a44.443844 44.443844 0 0 1-10.12332-43.456204 43.209293 43.209293 0 0 1 32.345242-28.394678 42.715473 42.715473 0 0 1 41.727832 14.073884l135.306815 150.61525 26.666306 32.839063a49.382049 49.382049 0 0 0 65.678126 7.654218 51.851152 51.851152 0 0 0 17.530627-64.443575 52.344972 52.344972 0 0 1-2.716012-5.185115l-1.234552-3.209833-1.975282-2.469102-2.469102-2.962923-1.728372-1.728372-49.382049-54.320254-236.786926-257.280477c-22.715743-19.258999-200.73803-159.257109-388.389817-30.12305-200.73803 139.257379-140.73884 370.365369-63.702844 478.265147l28.888499 39.75255c66.171946 88.887689 263.206322 285.922065 386.908356 407.154996a148.146148 148.146148 0 0 0 205.676235 1.975282l-235.799285-251.107721a44.443844 44.443844 0 0 1 1.481461-62.221382 42.962383 42.962383 0 0 1 61.233741 1.481462l235.552375 250.6139c24.691025-24.691025 51.604241-51.357331 78.270548-78.270548l-228.885798-243.453503a44.443844 44.443844 0 0 1 3.456743-59.99919 42.715473 42.715473 0 0 1 59.258459 0l227.404337 241.725131c24.691025-26.913217 51.110421-53.085703 74.073074-78.270548l-141.726481-150.86216a139.010469 139.010469 0 0 1-56.542447 11.851691z" fill="#2c2c2c" p-id="9044"></path></svg>
        </el-icon>
        <span>公益活动</span>
      </el-menu-item>
      <el-menu-item index="5">
        <el-icon>
          <svg t="1699345044917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11539" width="200" height="200"><path d="M742.784 810.666667c-33.109333-102.357333-97.152-165.76-182.016-239.018667A467.370667 467.370667 0 0 1 853.333333 469.333333V128h43.008c23.381333 0 42.325333 18.986667 42.325334 42.368v683.264a42.666667 42.666667 0 0 1-42.325334 42.368H127.658667A42.368 42.368 0 0 1 85.333333 853.632V170.368A42.666667 42.666667 0 0 1 127.658667 128H256V42.666667h85.333333v170.666666H170.666667v298.666667c222.72 0 412.245333 105.045333 482.688 298.666667h89.429333zM768 42.666667v170.666666h-341.333333V128h256V42.666667h85.333333z m-64 384a64 64 0 1 1 0-128 64 64 0 0 1 0 128z" p-id="11540"></path></svg>
        </el-icon>
        <span>爪印画廊</span>
      </el-menu-item>

      <el-menu-item index="7" @click="router.push('/cat/user')">
        <el-icon>
          <setting/>
        </el-icon>
        <span>个人中心</span>
      </el-menu-item>
    </el-menu>

    <el-row align="top" style="width: 60px;">
      <el-col style="height: 10vh;width: 0;">
      </el-col>

      <el-col>
        <el-row justify="center">
          <el-avatar :size="30" shape="square" src="/img/重.png"
                     style="background-color: white;"/>
        </el-row>
      </el-col>

      <el-col style="margin-top: 2px;">
        <el-row justify="center">
          <el-avatar :size="30" shape="square" src="/img/工.png"
                     style="background-color: white;"/>
        </el-row>
      </el-col>

      <el-col style="margin-top: 2px;">
        <el-row justify="center">
          <el-avatar :size="30" shape="square" src="/img/小.png"
                     style="background-color: white;"/>
        </el-row>
      </el-col>

      <el-col style="margin-top: 2px;">
        <el-row justify="center">
          <el-avatar :size="30" shape="square" src="/img/猫.png"
                     style="background-color: white;"/>
        </el-row>
      </el-col>

      <el-col>
        <el-row justify="center">
          <el-avatar :size="90" shape="square"
                     src="/img/猫(1).png" style="background-color: white;cursor: pointer"
                     @click="router.push('/cat')"/>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>

import router from "@/router";
import {ArrowLeft, ArrowRight, Document, Setting,} from "@element-plus/icons-vue";
import {markRaw, ref} from "vue";

const isArrow = markRaw(ArrowRight)
const isCollapse = ref(true)
const ChangeArrow = () => {
  isCollapse.value = !isCollapse.value
  if (isCollapse.value) {
    isArrow.value = ArrowRight
  } else {
    isArrow.value = ArrowLeft
  }
}
</script>

<style scoped>
.el-menu {
  border-right: 0 !important;
}

.el-main {
  padding: 0;
}

.el-header {
  padding: 0;
}

.el-card__body {
  padding: 1px !important;
}
</style>